<!DOCTYPE html>
<!-- saved from url=(0046)https://www.jq22.com/demo/weather201805250033/ -->
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

	<title>Weather</title>
	<link rel="stylesheet" href="./Weather_files/iconfont.css">
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		ul,
		li {
			list-style: none;
		}

		a {
			text-decoration: none;
		}

		html,
		body {
			width: 100%;
			height: 100%;
			background: #00BFFF;
		}

		input {
			border: none;
			outline: none;
		}

		.clearfix:after {
			content: "";
			height: 0;
			line-height: 0;
			display: block;
			clear: both;
		}

		.clearfix {
			zoom: 1;
		}

		.wrap {
			width: 600px;
			min-height: 300px;
			position: fixed;
			left: 50%;
			top: 50%;
			margin-left: -300px;
			margin-top: -150px;
		}

		.wrap .header {
			width: 100%;
			height: 40px;
			position: relative;
			line-height: 40px;
			border: 1px solid #fff;
			border-radius: 4px;
		}

		.wrap .header .intCity {
			width: 80%;
			height: 40px;
			line-height: 40px;
			font-size: 16px;
			text-indent: 10px;
		}

		.wrap .header .seachBtn {
			width: 19%;
			height: 40px;
			line-height: 40px;
			font-size: 16px;
			color: #fff;
			text-align: center;
			background: #00BFFF;
			font-weight: 600;
			cursor: pointer;
		}

		.wrap .left {
			width: 800px;
			min-height: 300px;
			float: left;
			text-align: left;
			padding-top: 20px;
		}

		.wrap .left li {
			height: 40px;
			line-height: 40px;
			font-size: 16px;
			color: #fff;
		}

		.wrap .left li i {
			font-size: 22px;
			color: yellow;
		}

		.wrap .left li .span2 {
			margin-left: 20px;
		}

		.wrap .left li .cityName {
			font-size: 20px;
		}

		.wrap .right {
			width: 400px;
			text-align: center;
			float: right;
		}

		.wrap .right ul {
			margin-top: 20px;
			color: #fff;
			font-size: 16px;
		}

		.wrap .right .data1 {
			width: 50%;
			float: left;
		}

		.wrap .right .data2 {
			width: 50%;
			float: left;
		}

		.wrap .right .data3 {
			width: 100%;
		}

		input {
			outline: none;
			border: none;
			height: 30px;
		}
	</style>
</head>

<body style="">
	<div class="wrap clearfix">
		<div class="header">
			<input class="intCity" type="text" placeholder="Please enter the city" value="北京">
			<input class="seachBtn" type="button" value="Seach">
		</div>
		<div class="left" style="width: 800px;">
			<ul>
				<li><span><i class="icon iconfont icon-chengshi"></i></span><span class="cityName span2"></span></li>
				<li><span><i class="icon iconfont icon-riqi"></i></span><span class="left_data span2"></span></li>
				<li><span><i class="icon iconfont icon-weather2"></i></span><span class="left_weather span2"></span>
				</li>
				<li><span><i class="icon iconfont icon-wendu"></i></span><span class="left_temp span2"></span></li>
				<li><span><i class="icon iconfont icon-fengxiang"></i></span><span class="left_wind1 span2"></span></li>
				<li><span><i class="icon iconfont icon-qixiang-fengli"></i></span><span class="left_wind2 span2"></span>
				</li>
			</ul>
		</div>
		<div class="right">
			<ul class="data1"></ul>
			<ul class="data2"></ul>
			<ul class="dataOne"></ul>
		</div>
	</div>
	<script src="./Weather_files/jquery-1.10.2.js.下载"></script>
	<script src="./Weather_files/jquery.min.js.下载"></script>
	<script src="./Weather_files/subway"></script>
	<script>
		// 默认调用一次
		getWeather($(".intCity").val(), "post", ".box1");
		function getWeather(location, type, el) {
			// console.log(location);
			var url = "http://127.0.0.1:8080/getNowWearth?name=" + location;
			$.ajax({
				url: url,
				type: type,
				success: function (status, data) {
					// console.log(status);
					var html1 = "";
					var html2 = "";
					var htmlOne = "";
					if (status.string.length > 0) {
						$(".data1").css("display", "none");
						$(".data2").css("display", "none");
						$(".data3").css("display", "block");

						var weatherData = status.string;
						console.log(status.string[0] + "省" + status.string[1]);
						$(".cityName").html(status.string[0] + "省 - " + status.string[1]);
						$(".left_data").html(status.string[4]);
						$(".left_weather").html(weatherData[5] + " \ " + weatherData[6]);
						$(".left_temp").html(weatherData[7] + " \ ");
						$(".left_wind1").html(weatherData[10] + " \ ");
						$(".left_wind2").html(weatherData[11] + " \ ");

						// for (var i = 1; i < weatherData.length; i++) {
						// 	htmlOne += '<li>' + weatherData[i] + '</li><li>星期' + weatherData[i] + '</li><li>' + weatherData[i] + '"\"' + weatherData[i] + '</li><li>' + weatherData[i] + '"\"' + weatherData[i] + '</li><li>' + weatherData[i] + '"\"' + weatherData[i] + '</li><li>' + weatherData[i] + '"\"' + weatherData[i] + '</li>'
						// }
						$(".dataOne").html(htmlOne);


					} else {
						$(".data1").css("display", "block");
						$(".data2").css("display", "block");
						$(".data3").css("display", "none");
					}


				},
				error: function (status) {
				}
			})
		}
		// 确定按钮被按下
		$(".seachBtn").click(function () {
			getWeather($(".intCity").val(), "post", ".box1");
		})
		// input输入框
		$(".intCity").on("keydown", function (event) {
			if (event.key === "Enter") { // 检查按下的键是否是回车键
				event.preventDefault(); // 阻止默认的回车键行为
				// 在这里编写处理回车键按下的逻辑
				// console.log("回车键被按下");
				getWeather($(".intCity").val(), "post", ".box1");
			}
		});
		function addHtmlTwo() {
		}
		function addHtmlOne() {

		}


	</script>


</body>

</html>